<template>
  <v-container>
    <v-row>
      <v-col cols="4" class="mx-auto ">
        <v-img
          alt="TreeHole Logo"
          class="shrink mt-5 mx-auto"
          contain
          src="/upload/assets/talk.png"
          transition="scale-transition"
          width="200"
        />
        <v-form
          ref="form"
          v-model="valid"
          lazy-validation
          class="mt-5"
        >
          <v-text-field
            v-model="uname"
            counter="16"
            label="用户名"
            :rules="nameRules"
            prepend-icon="mdi-account"
            required
          ></v-text-field>
          
          <v-text-field
            v-model="password"
            :append-icon="showPwd ? 'mdi-eye' : 'mdi-eye-off'"
            :type="showPwd ? 'text' : 'password'"
            counter="18"
            label="密码"
            hint="密码长度在6到18之间"
            prepend-icon="mdi-lock-outline"
            :rules="pwdRules"
            @click:append="showPwd = !showPwd"
          ></v-text-field>

          <v-checkbox
            v-model="isRemember"
            label="记住密码"
            required
          ></v-checkbox>

          <v-row
            align="center"
            justify="end"
          >
            <v-btn
              tile
              color="success"
              @click="login_account()"
            >
              <v-icon left>mdi-tree</v-icon>
              登录
            </v-btn>
          </v-row>
        </v-form>

      </v-col>
    </v-row>

    <v-overlay :value="overlay"></v-overlay>
  </v-container>
</template>

<script>
export default {
  name: 'MyLogin',
  data:()=>({
    uname: localStorage.getItem('name'),
    password: localStorage.getItem('password'),
    valid: true,
    isRemember: localStorage.getItem('isRemember') === 'true',
    showPwd: false,
    overlay: false,
    nameRules: [
      v => !!v || '用户名必须填写！',
      v => (v && v.length > 2 && v.length < 17) || '用户名不合法！用户名长度必须在3到16之间！',
      v => /^[\u4E00-\u9FFFa-zA-Z]{1}[\u4E00-\u9FFFa-zA-Z0-9]{2,15}$/.test(v) || 
        '用户名不合法!用户名应该不以数字开头！'
    ],
    pwdRules: [
      v => !!v || '密码必须填写！',
      v => (v && v.length > 5 && v.length < 19) || '密码不合法！密码长度必须在6到18之间！',
      v => /^[$@!%*#~?&0-9a-zA-Z]{6,18}$/.test(v) || '密码不合法！密码只能包含数字、字母、特殊字符！'
    ],
  }),
  methods:{
    login_account(){
      if(this.$refs.form.validate()){
        // 设置无法访问!
        this.overlay = true;

        const user = {
          name: this.uname,
          password: this.password
        }

        this.$axios.post('/api/user/login', this.$qs.stringify(user))
        .then(r=>{
            const res = r.data;

            if(res.status == 200){
              // 自定义user
              const user = {
                userId: res.data.id,
                name: res.data.name,
                avatar: res.data.avatar,
                token: res.data.token
              }

              // 设置用户属性
              localStorage.setItem('token', user.token)
              localStorage.setItem('userId',  user.userId)

              // 如果是rember me，那么需要同时设置用户名和密码
              this.doRemberMe()

              // 登录账户  
              this.$store.commit('LOGIN_USER', user)

              this.$router.replace('/')
            }else{
              this.$message.error(res.msg)
            }
        })
        .catch(Error=>{
            console.log(Error)
        }).finally(()=>{  
            this.overlay = false;
        })
        
      }
    },
    doRemberMe(){
        if(this.isRemember){
          localStorage.setItem('name', this.uname)
          localStorage.setItem('password', this.password)
          localStorage.setItem('isRemember', true)
        }else{
          localStorage.removeItem('name')
          localStorage.removeItem('password')
          localStorage.removeItem('isRemember')
        }
    }
  }
}
</script>

<style>

</style>